<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置接口实现自动请求数据并渲染列表')}`">{{ $t('配置接口实现自动请求数据并渲染列表') }}</t>
            <li>
                <span class="d-code">request-config</span>是通过接口请求列表数据的配置，配置后可实现自动发起请求获取列表数据；用法与
                <span class="s-code pointer" @click="viewAttributes">【Table】组件</span>一模一样
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ name }) => name).join('、') || '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开弹窗选择器</el-button>
        <sib-table-picker
            width="900px"
            multiple
            v-model="visible"
            :selection="selections"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig"
            @confirm="confirm">
        </sib-table-picker>
    </example>
</template>

<script>
import { ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        const selections = ref([]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
            confirm(rows) {
                selections.value = rows;
            },
            viewAttributes() {
                window.NProgress.start();

                setTimeout(() => {
                    router.push('/table').then(() => {
                        nextTick(() => {
                            setTimeout(() => {
                                window.NProgress.done();
                                const attributesDom = document.getElementById('Table 属性') || document.getElementById('attributes');
                                if (attributesDom) attributesDom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                            }, 2000);
                        });
                    });
                }, 300);
            },
            templateString: `<template>
    <div class="example-box">
        <p>当前已选择：{{ selections.map(({ name }) => name).join('、') || '--' }}</p>
        <el-button type="primary" @click="visible = true">点击打开弹窗选择器</el-button>
        <sib-table-picker
            width="900px"
            multiple
            v-model="visible"
            :selection="selections"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig"
            @confirm="confirm">
        </sib-table-picker>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);
        
        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
            confirm(rows) {
                selections.value = rows;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
